<template>
  <div class="dialog-modal">
    {{ dialogs }}
  </div>
</template>
<script setup>
import { ref, watchEffect, defineAsyncComponent } from "vue";
import $bus from "@/utils/bus";
import components from "./components/index";
import {
  useMessage,
  NModal
} from "naive-ui";
// dialog组件
// const customCreateRtmpDialog = defineAsyncComponent(() => import("./customCreateRtmpDialog/customCreateRtmpDialog.vue"));

const $Message = useMessage();
const dialogs = ref([]);
const skeletonStatu = ref(false);
console.log("$Message => ", $Message);

const createDialog = data => {
  watchEffect(() => {
    const myComponent = components[data.component];
    
    skeletonStatu.value = true;
    setTimeout(() => { skeletonStatu.value = false; }, 1000)
  });
};

const closeDialog = () => {};

/**
 * $bus 监听
 * */
$bus.$on("@components/base/dialog.show", (data) => {
  createDialog(data);
});

$bus.$on("@components/base/dialog.close", (id) => {
  closeDialog(id);
});

$bus.$on("@components/base/dialog.closeAll", () => {
  dialogs.value = [];
});

</script>
<style lang="scss" scoped>
</style>